<template>
	<div>
		
  <div class="shopcart">
      <div class="content" @click="toggleList">
        	<!--content-left-->
        	<div class="contentleft">
        		<div class="logo-wrapper">
        			<div class="logo" :class="{'highlight':totalCount>0}">
        				<i class="icon-shopping_cart" :class="{'highlight':totalCount>0}"></i>
        			</div>
        			<div class="num" v-show="totalCount>0">{{totalCount}}</div>
        		</div>
        		<div class="price" :class="{'highlight':totalCount>0}">&yen;{{totalPrice}}</div>
            <div class="desc">另需配送费&yen;{{deliveryPrice}}元</div>
          </div>
          <!--content-right-->
        	<div class="contentright" @click.stop.prevent="pay">
        		 <div class="pay" :class="payClass">{{payDesc}}</div>
        	</div>
      </div>
      <!--定义一个动画小球-->
     <div class="ball-container">

     		<div v-for="(ball,index) in balls" v-show="ball.show" class="ball"  :key="index">
		        <!--<transition  name="drop"
		     	   v-on:before-enter="beforeEnter"
				   v-on:enter="enter"
				   v-on:after-enter="afterEnter">
     			<div class="inner inner-hook" ></div>
     		</transitions>-->
     		</div>
     	
     </div>
     <!--定义购物车下拉组件-->
     <transition name="fa" mode="">
	      <div class="shopcart-list" v-show="listshow">
	      	 <!--top-->
	      	<div class="list-header border-bottom">
	      		<div class="title">购物车</div>
	      		<div class="empty" @click="empty">清空</div>
	      	</div>
	        <!--center-->
		      <div class="list-content" ref="listcontent">
		      	<ul>
			      		<li class="food border-bottom" v-for="(food,index) in selectFoods" :key="index">
			      			<span class="name">{{food.name}}</span>
			      			<div class="price">
			      					<span>&yen;{{food.price*food.count}}</span>
			      			</div>
			      			<div class="cartcontrol-wrapper">
			      					<cartcontrol :food="food"></cartcontrol>
			      			</div>
			      		</li>
		      	</ul>
		      </div>
	      </div>
     	</transition>
  
  
  </div>
  
  <!--遮罩层-->
     <transition name="zm">
		  <div class="list-mask" v-show="listshow" @click="hideList"> </div>
		  </transition>	
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import cartcontrol from '@/components/cartcontrol/cartcontrol'
export default {
  name: 'shopcart',
  props: {
  	selectFoods:{ //从goods传递过来所选商品的信息（价格 条数 ）
  		 type:Array,
  		 default(){
  		 	return [
  		 
  		 	];
  		 }
  	},
     deliveryPrice: { //配送
        type: Number,
        default: 0
      },
      minPrice: { //起送
        type: Number,
        default: 0
      }
  },
  data () {
    return {
     	balls:[{
            show: false
          },
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          }],
          dropBalls:[],
          fold:true
    }
  },
  methods:{
  	drop(el){//goods.vue 调用了我_drop() this.$refs.shopcart.drop(target)
			for(let i=0;i<this.balls.length;i++){ //循环遍历小球 第一个为false
				let ball=this.balls[i]
				if(!ball.show){   //假如为false 就变为true
					ball.show=true;
					ball.el=el;
					this.dropBalls.push(ball)
					return;
				 }
			}
		},
		toggleList(){//何时消失提示下拉框
			if(!this.totalCount){
			  	  return
			}
				this.fold=!this.fold;
	},
	hideList(){//点击遮罩层事件
	  		this.fold=true;
		},
	pay(){//结算按钮
			if(this.totalPrice<this.minPrice){
				return
			}
//			window.alert(`支付${payDesc}元`)
			window.alert(`支付${this.totalPrice}元`);
	},
 
  beforeEnter: function (el) {
  	
//     let count=this.balls.length;
//     console.log(count)
//     while(count){
//     	let ball=this.balls[count];
//     	if(ball.show){
//     		let rect=ball.el.getBoundingClientRect();//获取浏览器先单于视口的位子
//     		let x=rect.left-32;
//     		let y=-(window.innerHeight-rect.top-22)
//     		el.style.display="";
//     		el.style.webkiTransform=`translate3d(24px, ${y}px, 0)`;
//     		el.style.transform=`translate3d(24px, ${y}px, 0)`
//     		let inner=el.getElementsByClassName('inner-hook')[0];
//     		inner.sryle.webkiTransform=`translate3d(${x}px,0, 0)`;
//     		inner.style.transform=`translate3d(${x}px,0, 0)`;
//     	}
//     }

let count = this.balls.length;
          while (count--) {
            let ball = this.balls[count];
            if (ball.show) {
              let rect = ball.el.getBoundingClientRect();
             
              let x = rect.left - 32;
              let y = -(window.innerHeight - rect.top - 22);
              el.style.display = '';
              el.style.webkitTransform = `translate3d(0,${y}px,0)`;
              el.style.transform = `translate3d(0,${y}px,0)`;
              let inner = el.getElementsByClassName('inner-hook')[0];
              inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
              inner.style.transform = `translate3d(${x}px,0,0)`;
            }
          }
          
          
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
//  触发浏览器重绘
//  let rf=el.offestHeight;
//	this.$nextTick(()=>{
//		el.style.webkiTransform=`translate3d(0, 0, 0)`;
//     	el.style.transform=`translate3d(0, 0, 0)`
//     	let inner=el.getElementsByClassName('inner-hook')[0];
//     	inner.sryle.webkiTransform=`translate3d(0, 0, 0)`;
//     	inner.style.transform=`translate3d(0, 0, 0)`;
//	})

     let refresh = el.offsetHeight;
                this.$nextTick(() => {
                    el.style.webkitTransform = 'translate3d(0,0,0)';
                    el.style.transform = 'translate3d(0,0,0)';
                    let inner = el.getElementsByClassName('inner')[0];
                    inner.style.webkitTransform = 'translate3d(0,0,0)';
                    inner.style.transform = 'translate3d(0,0,0)';
                });
                done();
                
                
  },
  afterEnter: function (el) {
    // ...
         let ball = this.dropBalls.shift();
         console.log(ball)
          if (ball) {
            ball.show = false;
            el.style.display = 'none';
          }
    
    
    
  },
  enterCancelled: function (el) {
    // ...
  },
  empty(){//清空购物车
  	this.selectFoods.forEach((food)=>{
  		food.count=0;
  	})
  }
  	
  	
  },
  computed:{
  	totalPrice(){ //循环计算件数*单价=总价
  		 let total=0;
  		 this.selectFoods.forEach((food)=>{
  		 	  total+=food.price*food.count;
  		 })
  		 return total;
  	},
  	totalCount(){//所选商品数量件数总和
  		let count=0;
  		this.selectFoods.forEach((food)=>{
  			count+=food.count;
  		});
  		return count;
  	},
	payDesc(){ //商品起送价的 不同颜色状态
		 if(this.totalPrice===0){  //为0
		 	return `¥${this.minPrice}元起送`;
		 }else if(this.totalPrice<this.minPrice){ //不足起送价
		 	let diff=this.minPrice-this.totalPrice;
		 	return `还差¥${diff}元起送`
		 }else{//满足条件
		 	return '去结算'
		 }
	},
	payClass(){ //判断 结算按钮 显示什么样的颜色
		if(this.totalPrice<this.minPrice){ //总价小于起送价
			return 'not-enough'
		}else{
			return 'enough'
		}
	},
	listshow(){//判断下拉框展开还是折叠
		 if(!this.totalCount){
		 			this.fold=true;
		 			return false;
		 }else{
		 	  let show=!this.fold;
		 	  //只有当列表展示才可以点击
				if(show){
					this.$nextTick(()=>{  //没有渲染就点击渲染
						if(!this.scroll){
								this.scroll=new BScroll(this.$refs.listcontent,{
									click:true
								});
						}else{ //如果已经渲染就 调用接口
							this.scroll.refresh()
						}
					
					})
				}
				
		 	  return show
		 }
	}
	
 },
  components:{
   	cartcontrol
   }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
		@import "../../common/stylus/border.css";
		@import "../../common/stylus/icon.less";
      .zm-enter,.zm-leave-to{
				opacity: 0;
				background:rgba(7,17,27,0);
			}
			.zm-enter-active,.zm-leave-active{
				transition: all 1s;
				background:rgba(7,17,27,0.6);
			}
		.shopcart{
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 50;
			width: 100%;
			height: 48px;
			background: #000;
			.content{
				display: flex;
				background: #141d27;
				color: rgba(255,255,255,.4);
				.contentleft{
					flex: 1;
					.logo-wrapper{
						display: inline-block;
						vertical-align:top;
					  position: relative;
					  top:-10px;
					  margin:0 12px;
					  padding:6px;
					  width:56px;
					  height:56px;
					  box-sizing:border-box;
					  border-radius:50%;
					  background:rgb(20,29,39);		
					  z-index:98;				
						.logo{
							width: 100%;
							height: 100%;
							border-radius:50%;
							background:#2b343c;
							text-align:center;
							&.highlight{
								background: rgb(0,160,220);
							}
							.icon-shopping_cart{
								font-size:24px;
								color:#80858a;
								line-height: 44px;
								&.highlight{
									color: #FFFFFF;
								}
							}		
						}
						.num{
							position: absolute;
							top: 0;
							right: 0;
							width: 24px;
							height: 16px;
							line-height: 16px;
							text-align: center;
							border-radius:18px;
							font-weight: 700;
							z-index: 100;
							font-size: 9px;
							color: #fff;
							background: rgb(240,20,20);
							box-shadow: 0 4px 08px 0 rgba(0,0,0,0.4);
						}
					}
					.price{
						display: inline-block;
						vertical-align: top;
						line-height: 24px;
						padding-right: 12px;
						box-sizing:border-box;
						font-size:16px;
						font-weight: 700;
						color:rgba(255,255,255,0.4);
						margin-top: 12px;
						&.border-right{
							background: rgba(255,255,255,.1);
						}
						&.highlight{
							color: #FFFFFF;
						}
					}
					.desc{
						display: inline-block;
						margin: 12px 0 0 12px;
						line-height: 24px;
						vertical-align:top;
						color: rgba(255,255,255,.4);
						font-size: 10px;
					}
				}
				.contentright{
					flex: 0 0 120px;
					width: 120px;
					.pay{
						line-height: 48px;
						height: 48px;
						text-align: center;
						font-size: 12px;
						font-weight: 700;
						background:#2b333b;
						&.not-enough{
							background: #2b333b;
						}
						&.enough{
							background:#00b43c;
							color: #FFFFFF;
						}
					}
					
				}
			}
			.ball-container{
				.ball{
					  position: fixed;
			        left: 32px;
			        bottom: 22px;
			        z-index: 200;
				
					&.drop-enter-active,&.drop-leave-active{
					    transition: all 0.9s cubic-bezier(0.49, -0.29, 0.75, 0.41);
					    .inner{
							width: 16px;
							height: 16px;
							border-radius:50% ;
							background:  rgb(0,160,220);
							transform: all .4s linear;
						 }
					}
				}
			}
			.shopcart-list{
				position:absolute;
				bottom:48px;
				left: 0;
				z-index: 10;
				width: 100%;
				box-sizing: border-box;
				/*&.fa-enter-active,&.fa-leave-active{
			    transition: all 5s;
					transform: translate3d(0,0, 0);
				}
				&.fa-enter,&.fa-leave-to{
				  transform: translate3d(0,1, 0);
				}*/
				/*&.fa-enter-active {
					transform: translate3d(0,-100%, 0);
					  transition: all 3s ease;
					}
					&.fa-enter, &.fa-leave-to{
					/* .slide-fade-leave-active for below version 2.1.8 */ 
					  /*transform: translate3d(0,0, 0);
					
					}*/
				
				.list-header{
					height: 40px;
					line-height: 40px;
					padding: 0 18px;
					background: #f3f5f7;
					&.border-bottom{
					border-bottom:	1px solid rgba(7,17,27,0.1);
					.title{
						float: left;
						font-size: 14px;
						color: rgb(7,17,27);
					}
					.empty{
						float: right;
						font-size: 12px;
						 color: rgb(0, 160, 220)
					}
				}
			  }
			  .list-content{
			  	 padding: 0 18px;
			  	 max-height: 217px;
			  	 background: #FFFFFF;
			  	 overflow: hidden;
			  	 .food{
			  	 	position: relative;
			  	 	padding: 12px 0;
			  	 	box-sizing: border-box;
			  	 	.name{
			  	 		line-height: 24px;
			  	 		font-size: 14px;
			  	 		color: reg(7,17,27);
			  	 	}
			  	 	.price{
			  	 		position: absolute;
			  	 		right: 91px;
			  	 		bottom: 12px;
			  	 		line-height: 20px;
			  	 		font-size: 14px;
			  	 		font-weight: 700px;
			  	 		color: rgb(240,20,20);
			  	 	}
			  	 	.cartcontrol-wrapper{
			  	 		position: absolute;
			  	 		right: 0;
			  	 		bottom: 6px;
			  	 	}
			  	 	
			  	 	
			  	 }
			  }
				
			}
		}
		.list-mask{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 49;
			backdrop-filter:blur(10px);
	   	background:rgba(7,17,27,0.6);
		}
	   .fade-enter,.fade-leave-to{opacity: 0}
     .fade-enter-active,.fade-leave-active{transition: opacity  .4s;}
     

</style>
